<template>
  <div>
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人中心</span>
            </div>
            <div class="name-role">
              <span class="sender">{{user.user_name}} - {{dataForm.nickName}}</span>
            </div>
            <div class="registe-info">
          <span class="registe-info">
            注册时间：
            <i class="el-icon-timer"></i>
             2020/4/10 9:40:33
          </span>
            </div>
            <el-divider></el-divider>
            <div class="personal-relation">
              <div class="relation-item">手机号:  <div style="float: right; padding-right:20px;">{{dataForm.phone}}</div></div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">所属企业:  <div style="float: right; padding-right:20px;">杭州诚聚</div></div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">首页链接:  <div style="float: right; padding-right:20px;">{{dataForm.homeUrl}}</div></div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="80px" v-model="dataFrom" size="small" label-position="right">
                <el-form-item label="账号" prop="userName">
                  <el-input  auto-complete="off" v-model="user.user_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input auto-complete="off" v-model="dataForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="首页链接" prop="homeUrl">
                  <el-input  maxlength="18" v-model="dataForm.homeUrl"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary">提交</el-button>
                <el-button size="mini" type="warning" >关闭</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
name: "oneSelf",
  data(){
    return{
      dataForm:{
        nickName: '身份',
        phone: '173567777777',
        homeUrl: 'http://www.baidu.com',

        timeOver:'到期时间'
      },
      user:{
        user_name:''
      }
    }
  },
  mounted() {
  this.getUser()
  },
  methods:{
    getUser(){
      // console.log(localStorage.getItem("token"))
      axios({
        method:'get',
        params: {
          userName: localStorage.getItem("userName"),
          token:localStorage.getItem("token"),
        },
        url:'http://localhost:8081/front/getuser'
      }).then(res=>{
        this.user=res.data.data
      })
    }
  }
}
</script>

<style lang="css" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
  .name-role {
    font-size: 16px;
    padding: 5px;
    text-align:center;
  }
.sender{
  text-align:center;
}
.registe-info{
  text-align: center;
  padding-top:10px;
}
.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%
}

.relation-item {
  padding: 12px;

}
.dialog-footer{
  padding-top:10px ;
  padding-left: 10%;
}
  .el-row {
    margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>